<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css"
	href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"
	href="bootstrap-table-1.11.1/bootstrap-table.min.css">
<script type="text/javascript" src="jq/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="bootstrap-table-1.11.1/bootstrap-table.min.js"></script>
<script src="bootstrap-table-1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="bootstrap-table-1.11.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>


</head>
<body>
	<div class="container ">
		<div class="row">
			<div class="col-md-12">
				<table id="tb-cpu">

				</table>
			</div>
		</div>
	</div>
	<table></table>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#tb-cpu").bootstrapTable({
				url : './cpu/list', //请求后台的URL（*）
				//method: 'post',                      //请求方式（*）
				toolbar : '#toolbar', //工具按钮用哪个容器
				striped : true, //是否显示行间隔色
				cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
				pagination : true, //是否显示分页（*）
				//sortable : false, //是否启用排序
				//sortOrder : "asc", //排序方式
				queryParams : queryParams, //传递参数（*）
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 25, //每页的记录行数（*）
				pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
				search : true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
				strictSearch : true,
				showRefresh : true, //是否显示刷新按钮
				showColumns : true, //是否显示所有的列
				showToggle : true, //是否显示详细视图和列表视图的切换按钮
				clickToSelect : true, //是否启用点击选中行
				height : 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
				//uniqueId : "xxzjbh", //每一行的唯一标识，一般为主键列
				cardView : false, //是否显示详细视图
				detailView : false, //是否显示父子表
				columns : [ {
					checkbox : true
				}, {
					field : 'xxzjbh',
					title : '编号',
				}, {
					field : 'cpu_mc',
					title : '名称',
					filterControl: 'select'
				}, {
					field : 'cpu_cj',
					title : '厂家'
				}, {
					field : 'cpu_jg',
					title : '价格/元'
				}, {
					field : 'cpu_xn',
					title : '性能'
				} ]
			});

		});
		function queryParams(params) {
			var temp = {
				pageSize : params.limit, //页面大小
				pageNumber : params.offset
			//页码		
			}
			return temp
		}
	</script>
</body>
</html>